import Vue from 'vue'
import Vuex from 'vuex'

import axios from 'axios'

Vue.use(Vuex)

Vue.prototype.$http = axios

export default new Vuex.Store({
state: {
inputValue: '',
// 添加item的id
nextId: 5,
// 定义切换显示条项的索引值
viewKey: 'all',
list: [
{
id: 0,
info: 'Racing car sprays burning fuel into crowd.',
done: true
},
{ id: 1, info: 'Japanese princess to wed commoner.', done: false },
{
id: 2,
info: 'Australian walks 100km after outback crash.',
done: false
},
{ id: 3, info: 'Man charged over missing wedding girl.', done: true },
{ id: 4, info: 'Los Angeles battles huge wildfires.', done: false }
]
},
mutations: {
// 修改文本输入框中的内容
changeValue(state, value) {
state.inputValue = value
},
// 添加文本内容addItem
addItemToList(state, input) {
// 拼接一个对象，等待push到list中
const obj = {
id: state.nextId,
info: input,
done: false
}
// 将上面拼成的对象push到state的list数组中
state.list.push(obj)
state.nextId++
state.inputValue = ''
},
// 复选框状态改变
changeStatus(state, params) {
// 查找到点击的复选框的相同id的list中的对象的索引
const index = state.list.findIndex(i => i.id === params.id)

if (index !== -1) {
// 改变该索引的对象数据
state.list[index].done = params.done
}
},
// 删除list中的某一项
removeListItem(state, id) {
// 找到相同id的list中的索引
const i = state.list.findIndex(x => x.id === id)
// 根据索引删除数据
state.list.splice(i, 1)
},
// 删除所有已经完成的条项
removeAllDoneItem(state) {
state.list = state.list.filter(i => !i.done)
},
// 展示列表项的显示方式（全部，已完成，未完成）,改变viewKey值
displayItemStyle(state, param) {
if (param === 'all') {
state.viewKey = 'all'
} else if (param === 'un') {
state.viewKey = 'un'
} else {
state.viewKey = 'done'
}
}
},
actions: {
},
getters: {
// 自动计算出未完成的项目数量
undoneList(state) {
return state.list.filter(item => !item.done).length
},
// 根据条件显示需要展示的条项数量
toggleListItem(state) {
if (state.viewKey === 'all') {
return state.list
} else if (state.viewKey === 'un') {
return state.list.filter(i => !i.done)
} else {
return state.list.filter(i => i.done)
}
}
},
modules: {
}
})
